<template lang="pug">
    div(class="member-list tree-hold-top-panel")
        PageHeader(@no="goBack")
            span 房间信息
            template(v-slot:right)  &nbsp;
        div(class="my-identity")
            h2(class="title") 我的匿名身份
            div(class="my-identity-info")
                img(:src="image2ServerUrl(mask.avatar)" class="member-list-avatar")
                div(class="maskName") {{mask.maskName}}

        div(class="members")
            h2(class="title") 成员列表
            div(class="members-member" v-for="member in members" :key="member.id")
                img(:src="image2ServerUrl(member.avatar)" class="member-list-member-avatar" @click="showModal(member)")
                div(@click="showModal(member)") {{member.maskName}}
        div(class="quit-acton")
            Button(type="error" long @click="leaveRoom" style="margin-bottom:5px;") 退出房间
            template(v-if="isCreator")
                Button(type="error" ghost long @click="showConfirm") 注销房间(创建者权限)
            template(v-else-if="isAdmin")
                Button(type="error" ghost long @click="showConfirm") 注销房间(管理员权限)
        confirm(:visible="cancellationConfirmVisible"
            @click="doAction"
            content="您将进行注销聊天室操作，确认继续执行吗?"
            :buttons="[{ label: '确认注销', value: 'ok', type: 'error' },{label: '取消', value: 'cancel', type: 'default' }]")
        Modal(v-model="profileVisible" )
            div(v-if="currentMember" class="profile")
                img(:src="image2ServerUrl(currentMember.avatar)" class="profile-avatar")
                dl
                    dd {{currentMember.maskName}}
            div(slot="footer")
                div(v-if="isAdmin || isCreator")
                    Button(type="error" size="large" long @click="kickout" style="margin-bottom:5px" :loading="profileModalLoading") 踢出聊天
                div
                    Button(type="primary" size="large" long @click="profileVisible = false") 关闭
</template>
<script>
import axios from "@/plugin/axios";
import UtilMixin from "@/mixins/UtilMixin";
import util from "@/lib/util";
import confirm from "@/weui/confirm";

export default {
  mixins: [UtilMixin],
  components: { confirm },
  data() {
    return {
      members: [],
      roomId: "",
      mask: {},
      querying: false,
      isCreator: false,
      isAdmin: false,
      cancellationConfirmVisible: false,
      profileVisible: false,
      currentMember: null,
      profileModalLoading: false
    };
  },
  props: {},
  methods: {
    getMembers(callback) {
      if (this.members.length && callback)
        return new Promise((resolve, reject) => {
          resolve(this.members);
        });

      const data = { roomId: this.roomId };
      const options = { url: "chatroom/room/RoomInfo", method: "post", data };

      return axios(options);
    },
    // 列表中添加人
    add2MemberList(maskId, maskName, avatar) {
      var found = this.getMemberByMaskId();
      if (found) return; // 已存在

      this.members.push({ maskId, maskName, avatar }); //加入到列表中
    },
    // 列表中删除人
    removeMemberList(maskId) {
      const index = this.members.findIndex(m => {
        return m.maskId == maskId;
      });
      this.members.splice(index, 1);
    },
    // 从列表中查人
    getMemberByMaskId(maskId) {
      const found = this.members.find(m => {
        return m.maskId == maskId;
      });
      return found;
    },
    goBack() {
      console.log(this.$route);
      this.$router.back();
    },
    // 退出聊天室
    leaveRoom() {
      const options = {
        url: "chatroom/room/leave",
        data: { roomId: this.roomId },
        method: "post"
      };
      this.querying = true;
      axios(options)
        .then(() => {
          location.href =
            location.origin + `${location.pathname}/#/`.replace("//", "");
        })
        .catch(err => {
          console.log(err);
        })
        .then(() => (this.querying = false));
    },
    showConfirm() {
      this.cancellationConfirmVisible = true;
    },
    doAction(val) {
      console.log(val);

      if (val == "cancel") {
        this.cancellationConfirmVisible = false;
        return;
      }
      if (val == "ok") {
        const options = {
          url: "chatroom/room/cancellation",
          method: "post",
          data: { roomId: this.roomId }
        };
        axios(options)
          .then(() => {
            this.$router.back();
          })
          .catch(error => {
            this.$Message.errror(error.message);
          });
      }
    },
    showModal(member) {
      if (member.maskId == this.mask.maskId) return;
      this.currentMember = member;
      this.profileVisible = true;
    },
    kickout() {
      const data = { roomId: this.roomId, maskId: this.currentMember.maskId };
      const options = { url: "chatroom/room/kickout", method: "post", data };
      this.profileModalLoading = true;

      axios(options)
        .then(() => {
          this.profileVisible = false;
          this.$Message.info("已被移出");
          const index = this.members.findIndex(m => {
            return m.maskId == data.maskId;
          });
          this.members.splice(index, 1);
        })
        .catch(error => {
          this.$Message.error(error.message);
        })
        .then(() => {
          this.profileModalLoading = false;
        });
    }
  },
  created() {
    this.roomId = this.$route.params.id;
    this.getMembers().then(info => {
      this.members = info.members;
      this.mask = info.myMask;
      this.isAdmin = info.isAdmin;
      this.isCreator = info.isCreator;
    });
  },
  mounted() {
    if (util.isWeixin()) {
      const el = document.querySelector(".member-list");
      util.wxH5DragDownForbidden(el);
    }
  }
};
</script>
<style lang="less" scoped>
@cell-width: 100px; //

/** 默认头像icon */
i.default-avatar-icon {
  display: inline-block;
  width: @cell-width;
  height: @cell-width;
  border-radius: @cell-width;
  background: url(../../assets/theme/d-avatar.png) no-repeat center center;
  background-size: @cell-width @cell-width;
}

.member-list {
  min-height: 100vh;

  .title {
    padding: 10px;
    border-top: #eeeeee 1px solid;
    border-bottom: #eeeeee 1px solid;
  }

  .my-identity {
    &-info {
      text-align: center;
      padding: 15px;

      .maskName {
        font-size: 16px;
        font-weight: bolder;
      }
    }
  }

  &-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }

  @padding-bottom: 60px;
  padding-bottom: @padding-bottom;

  .quit-acton {
    position: absolute;
    width: 300px;
    margin: auto 10px;
    bottom: 20px;
  }
}

.members {
  overflow: hidden;

  &-member {
    width: @cell-width;
    float: left;
    text-align: center;
    margin: 5px;
    font-size: 14px;

    .member-list-member-avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
}

.profile {
  text-align: center;
}

.profile-avatar {
  max-width: 40px;
  border-radius: 50%;
}
</style>


